<template lang="pug">
view.w-full(:style="warpStyle")
view.fixed.w-full.top-0.bg-white(:style="warpStyle")
  .nav-bar(:style="navBarSyle")
    .flex-1.pl-4
      .text-gray-800.mr-2.text-xl.i-lucide-move-left(@click="back")
    .search-bar
      .text-gray-500.mr-2(class="i-lucide-search")
      input.text-sm.flex-1(v-model="searchText" placeholder="点击搜索")
      view(class="h-4 w-[1rpx] bg-gray-300 mr-2" type="search")
      .text-sm.text-neutral-900(@click="submitSearch") 搜索

  
</template>
<script setup lang="ts">
import { StyleValue, computed,ref } from 'vue'
import { useSystemInfo } from "@/stores/systemInfo";
const systemInfo = useSystemInfo();
import { useBaseStore } from "@/stores/base";
const baseStore = useBaseStore();
const { navBarInfo } = storeToRefs(systemInfo)
const warpStyle = computed<StyleValue>(() => {
  const {navBarHeight} = navBarInfo.value
  return {
    height:`${navBarHeight}px`
  }
})
const navBarSyle = computed<StyleValue>(() => {
  const {menuHeight,menuTop,maxWidth} = navBarInfo.value
  return {
    height:menuHeight+'px',
    top:`${menuTop}px`,
    width:`${maxWidth}px`
  }
})
const searchText = ref("")
function submitSearch(){
  if(searchText.value.length==0)return;
  baseStore.addSearchItem(searchText.value)
}
function nav() {
  uni.navigateTo({
    url:'/pages/search'
  })
}
function back(){
  uni.navigateBack({
    fail(){
      uni.reLaunch({
        url:'/pages/index/index'
      })
    }
  })
}
</script>
<style scoped lang="scss">
.nav-bar{
  @apply flex items-center  absolute justify-between;
}
.search-bar{
  @apply h-full rounded-full bg-gray-100 flex items-center px-4 w-[75%] mr-4;
}
</style>